<template>
  <div>
    <div>
      <el-tabs tab-position="left" @tab-click="handleClick">
        <el-tab-pane :label="$t('操作日志')">
          <div v-loading="fileOrDirRecordLoading" class="list-table">
            <el-form
              ref="queryForm"
              :model="queryParams"
              :inline="true"
            >
              <el-form-item :label="$t('操作时间')">
                <DatePicker
                  v-model="dateRange"
                  type="daterange"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
              </el-form-item>
            </el-form>
            <el-table :data="fileOrDirRecordList" border>
              <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
                <template slot-scope="scope">
                  {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column :label="$t('名称')" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.fileDirNameFromLibrary || scope.row.fileDirName }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('操作')" align="center" prop="type" show-overflow-tooltip width="150">
                <template slot-scope="scope">
                  <span>{{ $t(scope.row.type) }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('时间')" align="center" prop="time" show-overflow-tooltip width="150">
                <template slot-scope="scope">
                  <span>{{ renderTime(scope.row.time) }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('用户')" align="center" prop="nickName" show-overflow-tooltip width="150">
                <template slot="header" slot-scope="{}">
                  <span>{{ $t('用户') }}</span>
                  <el-tooltip placement="top">
                    <div slot="content">
                      <span v-html="$t('包含 * 的表示为外部用户')" />
                    </div>
                    <i class="el-icon-question" />
                  </el-tooltip>
                </template>
                <template slot-scope="scope">
                  {{ scope.row.nickName || scope.row.userName }}
                </template>
              </el-table-column>
              <el-table-column :label="$t('阅读时长')" align="center" prop="readingDuration" show-overflow-tooltip width="150">
                <template slot="header" slot-scope="{}">
                  <span>{{ $t('阅读时长') }}</span>
                </template>
                <template slot-scope="scope">
                  {{ scope.row.readingDuration }}
                </template>
              </el-table-column>
              <el-table-column :label="$t('阅读页数')" align="center" prop="numberPagesRead" show-overflow-tooltip width="150">
                <template slot="header" slot-scope="{}">
                  <span>{{ $t('阅读页数') }}</span>
                  <el-tooltip class="item" effect="dark" :content="$t('预览时间超过2秒则会被认定为已读(目前仅支持pdf及Word格式文件)')" placement="top-end">
                    <i class="el-icon-question" />
                  </el-tooltip>
                </template>
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" :content="$t('已读页包含:') + scope.row.numberPagesRead" placement="top-end">
                    <el-link type="primary" :underline="false">{{ sumNumberRead(scope.row.numberPagesRead) }}</el-link>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="init"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="officeSwitchStatus" :label="$t('历史版本')">
          <historicalFile ref="historicalFile" @close="close" />
        </el-tab-pane>
        <el-tab-pane :label="$t('分享记录')">
          <sysShareFilesList v-if="shareFormOpen" ref="sysShareFilesList" :from-record-page-file-id="fileDirId" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import sysShareFilesList from '@/views/file/share/sysShareFilesList.vue'
import historicalFile from '@/views/file/document/library/historicalFile.vue'
import { fundListRecord } from '@/api/file/filefolder/folder.js'
import { getSysVarValue } from '@/api/system/config'

export default {
    components: {
      sysShareFilesList,
      historicalFile
    },
    data() {
      return {
        total: 0,
        fileDirId: undefined,
        fileOrDirRecordList: undefined,
        fileOrDirRecordLoading: false,
        // 日期范围
        dateRange: [],
        // 查询参数
        queryParams: {
          id: undefined,
          pageNum: 1,
          pageSize: 10
        },
        // 当前预览方式: 是否开启了office
        officeSwitchStatus: false,
        shareFormOpen: false
      }
    },
    created() {
    },
    methods: {
      // 文件或目录的操作日志
      init() {
        this.getOfficeSwitch()
        this.fileOrDirRecordLoading = true
        this.queryParams.id = this.fileDirId
        fundListRecord(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.fileOrDirRecordList = response.rows
          this.fileOrDirRecordList.some(item => {
            if (item.fileDirNameFromLibrary === null || item.fileDirNameFromLibrary === undefined) {
              item.fileDirNameFromLibrary = ''
            }
            if (item.fileDirName === null || item.fileDirName === undefined) {
              item.fileDirName = ''
            }
          })
          this.total = response.total
          this.fileOrDirRecordLoading = false
        })
      },
      close() {
        this.$emit('versionRestoreClose', '')
      },
      renderTime(date) {
        var dateee = new Date(date).toJSON()
        var temp = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
        return temp.substring(0, temp.length - 3)
      },
      /** 搜索按钮操作 */
      queryHandle() {
        this.queryParams.pageNum = 1
        this.init(this.fileDirId)
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = []
        this.resetForm('queryForm')
        this.queryHandle()
      },
      // tab切换
      handleClick(tab, event) {
        if (tab.label === '操作日志') {
          console.log(tab.label)
          console.log(tab, event)
        }
        if (tab.label === '历史版本') {
          console.log(tab.label)
          this.$refs.historicalFile.fileDirId = this.fileDirId
          this.$refs.historicalFile.initVersion()
        }
        if (tab.label === '分享记录') {
          console.log(tab.label)
          this.shareFormOpen = true
        }
      },
      getOfficeSwitch() {
        getSysVarValue('office.changxie.enabled').then(response => {
          this.officeSwitchStatus = (response.data.office_changxie_enabled === 'true')
        })
      },
      sumNumberRead(val) {
        if (val !== undefined && val !== null && val.length > 0) {
          return val.split(',').length
        }
        return ''
      }
    }
  }
</script>
